<template>
  <div class="wraps">
    <!-- 左 按物资分类统计库存价值和占比 -->
    <div class="Left">
      <el-card class="box-card" shadow="hover" style="height: 83.5vh; position: relative;">
        <div slot="header" class="clearfix">
          <span style="font-size: 20px; color: #1890ff; font-weight: 550">按物资分类统计库存价值和占比</span>
        </div>
        <el-table ref="table" highlight-current-row height="70vh"
                  :header-cell-style="{background:'#F0F8FF',color:'#000000',fontWeight:'bold'}"
                  :data="wzFlJzFxList">
          <el-table-column label="序号" align="center" type="index"/>
          <el-table-column show-overflow-tooltip label="物资分类" align="center" prop="wzFl"/>
          <el-table-column show-overflow-tooltip label="物资种类数" align="center" prop="wzZlS"/>
          <el-table-column show-overflow-tooltip label="总库存量" align="center" prop="zkcl"/>
          <el-table-column show-overflow-tooltip label="总价值(元)" align="center" prop="zjz"/>
          <el-table-column show-overflow-tooltip label="价值占比(%)" align="center" prop="jzZb"/>
        </el-table>

      </el-card>
    </div>

  </div>
</template>

<script>
import {selectWzFlJzFx} from "@/api/wzgl/wzxx";

export default {
  name: "WzFlJzFx", //物资分类价值分析
  data() {
    return {
      wzFlJzFxList: [],
      loading: false,

    }
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询库存小于安全库存的数据 */
    getList() {
      this.loading = true;
      selectWzFlJzFx().then(response => {
        this.wzFlJzFxList = response.data;
        this.loading = false;
      });
    },
  }
}
</script>

<style scoped>
.wraps {
  position: relative;
  background-size: cover;
  width: 100%;
  height: calc(100vh - 134px);
  overflow: hidden; /* 防止 leftpart 超出 wrap */
}

/* 左上 */
.Left {
  position: absolute;
  top: 1%; /* 距离上面 6% */
  bottom: 1%; /* 距离下面 60% */
  left: 0.5%; /* 距离左侧1% */
  width: 99%;
  border: 1px solid #D9EDF7;
  /*background-color: rgba(9, 37, 59, 0.5); !* 模块背景颜色 并透明显示 *!*/
}
</style>
